/* eslint-disable array-callback-return */

import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Row, Spin, Button } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import styles from '@/utils/utils.less';

const { Description } = DescriptionList;
@connect(({ login, singlemanage, loading }) => ({
  login,
  singlemanage,
  loading: loading.models.singlemanage,
  insUpdateData: singlemanage.insUpdateData, // 社保详情数据
  pageRatioData: singlemanage.pageRatioData, // 企业工伤比例数据
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userType: 1,
      custInsAccoId: null,
    };
    this.columns = [
      {
        title: '开始年月',
        dataIndex: 'beginYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (text && `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`) || '--',
      },
      {
        title: '企业工伤比例(%)',
        dataIndex: 'ratioVal',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => text === 0 ? 0 : (text && text) || '--',
      },
    ];
  }

  componentDidMount() {
    const {
      login: { systemList },
      location,
    } = this.props;
    const custInsAccoId = queryString.parse(location.search).baseInfoId;
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
    });
    this.setState({ userType, custInsAccoId });
    // 获取社保详情数据
    this.getInsDetail(custInsAccoId);
    // 获取企业工伤比例
    this.geTratioVal(1, 10, custInsAccoId);
  }

  // 获取社保详情数据
  getInsDetail = custInsAccoId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'singlemanage/getInsDetail',
      payload: {
        custInsAccoId,
      },
    });
  };

  // 获取企业工伤比例
  geTratioVal = (currentPage = 1, pageSize = 10, custInsAccoId) => {
    const { dispatch } = this.props;
    const pageArg = {
      currentPage,
      pageSizes: pageSize,
    };
    const params = {
      custInsAccoId,
      pageArg,
      orderBy: 'CRE_TIME DESC',
    };
    dispatch({
      type: 'singlemanage/getInjRatioPage',
      payload: params,
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { custInsAccoId } = this.state;
    this.geTratioVal(pagination.current, pagination.pageSize, custInsAccoId);
  };

  render() {
    const { userType } = this.state;
    const {
      loading,
      singlemanage: { insUpdateData, pageRatioData },
    } = this.props;
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card title={<span style={{ fontWeight: 'bolder' }}>社保账户详情</span>}>
            <DescriptionList>
              <Description term="客户名称 ">{insUpdateData.custName || '--'}</Description>
              <Description term="社保账户名称">{insUpdateData.accoName || '--'}</Description>
              <Description term="统一社会信用代码">
                {insUpdateData.uniCreditCode || '--'}
              </Description>
              <Description term="地区">{insUpdateData.areaName || '--'}</Description>
              <Description term="单位名称">{insUpdateData.orgName || '--'}</Description>
              <Description term="所属社保机构">{insUpdateData.insOrg || '--'}</Description>
              <Description term="支付方式">{insUpdateData.payWayName || '--'}</Description>
              <Description term="银行账户信息">{insUpdateData.custBankAcc || '--'}</Description>
              <Description term="是否开户完成">{insUpdateData.doneFlagName || '--'}</Description>
              <Description term="缴纳险种">{insUpdateData.insKindNames || '--'}</Description>
              <Description term="社保组合">{insUpdateData.plcyName || '--'}</Description>
              {userType === 4 && (
                <Description term="申报负责人">{insUpdateData.respNameList || '--'}</Description>
              )}
              <Description term="开户企业类型">{insUpdateData.entpTypeName || '--'}</Description>
              <Description term="备注">{insUpdateData.remark || '--'}</Description>
              <Description term="创建人">{insUpdateData.creName || '--'}</Description>
              <Description term="创建时间">
                {moment(insUpdateData.creTime).format('YYYY-MM-DD HH:mm') || '--'}
              </Description>
            </DescriptionList>
          </Card>
          <Card title={<span style={{ fontWeight: 'bolder' }}>企业工伤比例</span>}>
            <Row className={styles.singleManage}>
              <StandardTable
                selectedRows={false}
                selectedRowKeys={false}
                rowSelection={null}
                loading={loading}
                data={pageRatioData}
                rowKey="insInjRatioId"
                columns={this.columns}
                onChange={this.handleStandardTableChange}
              />
            </Row>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>返回</Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default ClientInfoDetails;
